<route lang="json5">
  {
    style: {
     navigationStyle: 'custom',
    },
  }
</route>

<script lang="ts" setup>
import { loginRoute } from '@/interceptors/route'
import { useAppStore, useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'

const userStore = useUserStore()
const { navAreaHeight } = useAppStore()
onShow(() => {
  if (!userStore.isLogin()) {
    uni.navigateTo({ url: loginRoute })
  }
})

const stat = ref({})
const getStat = async () => {
  // const res = await getClassStatSummary({ id: userStore.userInfo?.id })
  // stat.value = res[0] || {}
  stat.value = {}
}

onLoad(() => {
  getStat()
})

const avatarUrl = getAvatar(null, 1)

const onLogout = () => {
  userStore.logout()
}

const todo = () => {
  uni.showToast({
    icon: 'none',
    title: '敬请期待~',
  })
}
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/banner-bg.png" :draggable="false" />
  <view class="tab-page relative px pb-safe">
    <view class="w-full" :style="{ height: `${navAreaHeight + 12}px` }" />
    <view class="h-136rpx flex-row-between-center">
      <image mode="scaleToFill" :src="avatarUrl" class="size-136rpx" :draggable="false" />
      <view class="ml-16px h-full flex-col-center-start flex-1 px-20rpx">
        <text class="text-18px fw-500 line-height-25px">
          {{ userStore.userInfo.name }}
        </text>
        <text class="mt-4px text-13px text-gray-5 line-height-18px">
          {{ userStore.userInfo.orgName }}
        </text>
      </view>
    </view>
    <!-- 上课统计 -->
    <!-- 操作列表 -->
    <view class="my flex-row-between-center rounded-8px px-4xl py-sm">
      <view class="flex-col-start-center">
        <view>
          <text class="font-size-[36rpx] color-[#1D2129] font-600">
            {{ stat.continueRate }}
          </text>
          <text class="font-size-[24rpx] color-[#4E5969]">
            %
          </text>
        </view>
        <text class="text-14px color-[#4E5969]">
          续报率
        </text>
      </view>
      <view class="line-col" />
      <view class="flex-col-start-center">
        <view>
          <text class="font-size-[36rpx] color-[#1D2129] font-600">
            {{ stat.cancelRate }}
          </text>
          <text class="font-size-[24rpx] color-[#4E5969]">
            %
          </text>
        </view>
        <text class="text-14px color-[#4E5969]">
          留存率
        </text>
      </view>
      <view class="line-col" />
      <view class="flex-col-start-center">
        <view>
          <text class="font-size-[36rpx] color-[#1D2129] font-600">
            {{ stat.retainedRate }}
          </text>
          <text class="font-size-[24rpx] color-[#4E5969]">
            %
          </text>
        </view>
        <text class="text-14px color-[#4E5969]">
          退费率
        </text>
      </view>
    </view>
    <!-- 数据查询 -->
    <view class="my flex-row-between-center rounded-8px bg-white px py">
      <view class="fun-item flex-col-start-center">
        <image src="/static/icons/icon-my-1.svg" class="fun-icon" @click="todo" />
        <text class="fun-text">
          退费管理
        </text>
      </view>
      <view class="fun-item flex-col-start-center">
        <image src="/static/icons/icon-my-2.svg" class="fun-icon" @click="todo" />
        <text class="fun-text">
          调转学员
        </text>
      </view>
      <view class="fun-item flex-col-start-center">
        <image src="/static/icons/icon-my-3.svg" class="fun-icon" @click="todo" />
        <text class="fun-text">
          我的云盘
        </text>
      </view>
      <view class="fun-item flex-col-start-center">
        <image src="/static/icons/icon-my-4.svg" class="fun-icon" @click="todo" />
        <text class="fun-text">
          新人手册
        </text>
      </view>
    </view>

    <view class="section">
      系统功能
    </view>
    <view class="my rounded-8px bg-white px">
      <!-- <view class="cell flex-row-between-center">
        <view class="flex-row-start-center">
          <image
            src="/static/icons/icon-phone.svg" mode="aspectFill"
            style="width: 36rpx;height: 36rpx;"
          />
          <text class="ml-8px">
            绑定手机号
          </text>
        </view>
      </view> -->
      <!-- <view class="cell flex-row-between-center">
        <view class="flex-row-start-center">
          <i class="iconfont iconfont-wechat text-gray-5 !text-20px" />
          <text class="ml-8px">
            绑定微信
          </text>
        </view>
      </view> -->
      <view class="cell flex-row-between-center" @click="onLogout">
        <view class="flex-row-start-center">
          <i class="iconfont iconfont-logout text-gray-5 !text-20px" />
          <text class="ml-8px">
            退出账号
          </text>
        </view>
        <i class="iconfont iconfont-arrow-right text-gray-5 !text-20px" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .background {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 564rpx;
  }

  .line-col {
    width: 1px;
    background: #ddd;
    transform: scaleX(0.5);
    height: 40rpx;
  }

  .fun-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    width: 72rpx;
    height: 72rpx;
  }

  .fun-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    color: #1D2129;
  }

  .btn-secondary {
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
  }

  .cell {
    height: 108rpx;
  }

  .cell:not(:last-child) {
    border-bottom: 1px solid #E5E6EB;
  }
</style>
